<template>
	<div class="loginContainer">
		<div class="header">
			<div class="headerCenter">
				<!-- logo -->
				<img class="logo" src="../../assets/img/login/logo.png" alt="长安民生物流" />
				<!-- 分隔线 -->
				<div class="DividerLine"></div>
				<div class="title">同城智慧物流管理平台</div>
			</div>
		</div>
		<div class="main">
			<div class="mainCenter">
				<div class="main_title">
					<div class="WelcomeUse">欢迎使用</div>
					<div class="name">同城智慧物流管理平台</div>
					<div class="englishName">
						Smart logistics management platform in the same city
					</div>
				</div>
				<img class="dian" src="../../assets/img/login/dian4.png" alt="" />
				<!-- 登录弹窗 -->
				<div class="loginBox">
					<loginItem></loginItem>
				</div>
			</div>
		</div>
		<div class="footer">
			<div class="footerInfo">
				<div class="title">Copyright 2023-{{ year }} 长安民生物流 版权所有</div>
				<div class="text">
					通使用谷歌浏览器或IE内核浏览器访问，使用过程中有任何问题，请拨打服务热线：023-88795445
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import loginItem from "./components/loginItem.vue"; //引用登录子组件
	import httpApi from "@/http";
	export default {
		data() {
			return {
				year: "",
			};
		},
		created() {
			localStorage.setItem("cont", 0);
			let token = localStorage.getItem("token");
			if (token) {
				httpApi.loginApi.getUserInfo().then((res) => {
					if (res.data.code == 200) {
						this.$router.push("/home/index");
					}
				});
			} else {
				return;
			}
		},
		components: {
			loginItem,
		},
		methods: {
			getYear() {
				var moment = require("moment");
				this.year = moment().format("YYYY");
				// console.log(this.year);
			}
		},
		mounted() {
			this.getYear()
		}
	};
</script>

<style lang="scss" scoped>
	.loginContainer {
		min-width: 1098px;
		width: 100%;
		height: 100vh;

		display: flex;
		flex-direction: column;

		//background-attachment: fixed;
		>.header {
			height: 15vh;
			max-height: 110px;
			width: 100%;
			background-color: #fff;
			display: flex;
			align-items: center;

			.headerCenter {
				width: 80vw;
				display: flex;
				align-items: center;
				margin: 0 auto;

				.logo {
					width: 105px;
					height: 42px;
				}

				>.DividerLine {
					width: 1px;
					height: 26px;
					background: #b0b0b0;
					margin-left: 21px;
					margin-right: 15px;
				}

				>.title {
					color: #262626;
					font-size: 20px;
				}
			}
		}

		>.main {
			width: 100%;
			height: 80vh;
			min-height: 524px;

			position: relative;
			background-image: url("../../assets/img/login/background4.png");
			background-repeat: no-repeat;
			background-size: cover;

			>.mainCenter {
				width: 82vw;
				min-width: 1098px;
				height: 100%;
				margin: 0 auto;

				position: relative;

				>.main_title {
					color: #fff;
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					font-size: 48px;
					position: relative;
					z-index: 100;
					display: inline-block;

					>.WelcomeUse {
						margin-bottom: 16px;
						font-weight: lighter;
					}

					>.name {
						font-weight: bold;
						margin-bottom: 17px;
					}

					>.englishName {
						font-size: 14px;
					}
				}

				>.dian {
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					left: 245px;
					width: 286px;
					height: 293px;
					z-index: 50;
				}

				>.loginBox {
					width: 360px;
					height: 360px;
					background-color: #fff;
					border-radius: 8px;
					position: absolute;
					right: 0;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}

		>.footer {
			width: 100%;
			height: 13vh;
			max-height: 110px;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;

			>.footerInfo {
				min-width: 1098px;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				font-size: 12px;
				color: #262626;
				align-items: center;

				>.title {
					margin-bottom: 6px;
				}
			}
		}
	}
</style>